<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>promise</title>
</head>
<body>


<hr>
<div>

   问题:<input id="question">
</div>

<div>
   答案：<span id="answer"></span>

</div>


</body>

<script>

  /**
   *  异步---
   *      耗时操作，跳步机制
   *  回调
   * */


  /**
   * 同步 ---顺序执行 --- 出现阻塞 ---- 1+5+2 = 8
   *   step1 ----- 1s
   *   step2 ----- 5s ---- 假死、block--阻塞----用户体验不好
   *   step3 ----- 2s
   *
   *   异步 ---跳步执行 --- 无阻塞   1+ 5 = 6
   *   step1 ----- 1s ----同步
   *   step2 ----- 5s ---- 异步 --- 开始，但不阻碍后续的步骤 --- 提升用户体验
   *   step3 ----- 2s
   *
   *
   *   比较
   *     1. 异步提升了用户体验
   *     2. 时间消耗相对较少--但不是绝对
   * */



  let question= document.getElementById('question');
  question.onkeyup = function (){


      let txtQuestion = this.value;

      let answer = document.getElementById('answer');
      answer.innerText ='waiting...';
      //getAnswer1(txtQuestion);


      getAnswer2(txtQuestion,function (answer){
          answer.innerText = answer;
         // getAnswer2(answer,function (){});


        //  alert(answer);
      })

  }


  let getAnswer1 = function (question){
      setTimeout(function (){
          let answer = document.getElementById('answer');
          answer.innerText = 'this is a answer for ' + question;
      },2000)
  }


 function getAnswer2(question,success){
      let answer =  'this is a answer for ' + question;

      setTimeout(function (){
          success(answer)
      },2000)

  }



</script>


</html>